<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      Header
    </el-header>
      <el-container>
        <!-- 页面主体区域-->
        <el-main>
          <el-row>
            <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img src="../assets/风景1.jpg" class="image">
                <div style="padding: 14px;">
                  <span>风景1</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">点击查看</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img src="../assets/风景1.jpg" class="image">
                <div style="padding: 14px;">
                  <span>风景2</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">点击查看</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      currentDate: new Date()
    }
  }
}
</script>

<style lang="less" scoped>

.el-main {
  background-color: #ffffff;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 80%;
  height: 10%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
